<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3.列表的过滤</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(person,index) in filterPersonList" :key="person.id">
                {{person.name}} -- {{person.age}} --{{person.sex}}
            </li>
        </ul>
        <hr>


        <script type="text/javascript">
            // 用 watch 实现
            /* new Vue({
                el: '#root',
                data() {
                    return {
                        keyWord: '',
                        personList: [
                            { id: '001', name: '马冬梅', age: 18, sex: '女' },
                            { id: '002', name: '周冬雨', age: 19, sex: '女' },
                            { id: '003', name: '周杰伦', age: 20, sex: '男' },
                            { id: '004', name: '温兆伦', age: 90, sex: '男' }
                        ],
                        filterPersonList: []
                    }
                },
                watch: {
                    keyWord: {
                        immediate: true,
                        handler(newValue) {
                            console.log('keyWord值发生了变化', newValue)
                            this.filterPersonList = this.personList.filter(p => {
                                return p.name.indexOf(newValue) !== -1;
                            });
                        }
                    }
                }
            }); */

            //  用 computed 实现
            new Vue({
                el: '#root',
                data() {
                    return {
                        keyWord: '',
                        personList: [
                            { id: '001', name: '马冬梅', age: 18, sex: '女' },
                            { id: '002', name: '周冬雨', age: 19, sex: '女' },
                            { id: '003', name: '周杰伦', age: 20, sex: '男' },
                            { id: '004', name: '温兆伦', age: 90, sex: '男' }
                        ]
                    }
                },
                computed: {
                    filterPersonList() {
                        return this.personList.filter(p => {
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                    }
                },

            });
        </script>

</body>

</html>